<template>
    <view class="page" :style="{'padding-top':navigationbarHeight+'px'}">
        <TopBar :showName='showName' :specialRoute="specialRoute"></TopBar>
        <view class="item-details" :style="{'top':navigationbarHeight+'px'}" :class="articleInfo.video_url_array.length != 0?'item-details-fixed':''">
            <!--            楼主信息-->
            <view class="list-item-head-c">
                <view class="item-head-portrait-a" @click.stop="addPersonCenter(articleInfo.user_id,articleInfo.no_name)">
                    <img :src="articleInfo.photo_url" />
                </view>
                <view class="item-head-name" @click.stop="addPersonCenter(articleInfo.user_id,articleInfo.no_name)">
                    <view class="name">
                        <p>{{articleInfo.user_name}}</p>
                        <img v-if="levelShow==1 && articleInfo.user_grade" :src="'http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/LV'+articleInfo.user_grade+'.png'"/>
                    </view>
                    <text>{{articleInfo.publish_time}}</text>
                </view>
                <view class="item-follow" v-if="articleInfo.user_id != userId">
                    <view size="mini" class="following" v-if="articleInfo.i_follow_it == 0" @click.stop="followUser(articleInfo.user_id)">关注</view>
                    <view size="mini" class=" following following-already" v-if="articleInfo.i_follow_it == 1" @click.stop="unFollowUser(articleInfo.user_id)">已关注</view>
                </view>
            </view>
            <!--            end-->
            <!--            视频，图文贴 -->
            <view class="item-content-a" :style="{'top':navigationbarHeight+'px'}" v-if="voteData.length==0">
               <view style="padding-bottom: 30rpx;padding-top: 15rpx;">
                    <u-parse class="content-text-a" noData=" " :content="articleInfo.content" @preview="preview" @navigate="navigate"/>
                </view>
                <view class="item-details-video"  v-if="articleInfo.video_url_array && articleInfo.video_url_array.length != 0">
                    <video id="video" show-mute-btn="true" enable-play-gesture="true" @play="onVideoShow" :src="articleInfo.video_url_array[0]"></video>
                </view>
                <view class="content-img-a" v-if="articleInfo.img_url_array.length < 4 ">
                    <img v-for="(imgUrl,key) in articleInfo.img_url_array" :key="key" :src="imgUrl" @click.stop="showPic(imgUrl,index)" mode="widthFix"/>
                </view>
                <view class="content-img-b" v-if="articleInfo.img_url_array.length > 3">
                    <img v-for="(item,index) in articleInfo.img_url_array" :key="index" :src="item" @click.stop="showPic(item,index)"/>
                </view>
            </view>
            <!--            end-->
			
			<!-- 投票帖 -->
			<view class="item-content-a" :style="{'top':navigationbarHeight+'px'}" v-if="voteData.length!=0">
				
			   <view style="padding-bottom: 30rpx;padding-top: 15rpx;">
			        <u-parse class="content-text-a" noData=" " :content="articleInfo.content" @preview="preview" @navigate="navigate"/>
			    </view>
				<!-- 未投票 -->
				<view class="vote-options" v-if="!articleInfo.already_vote">
					<radio-group>
						<view v-for="(item,index) of voteData" :key="index" class="vote-wrapper">
							<view class="radio" :class="{'radio-activity':index==voteIndex}"  @click="voteIndexChange(item,index)">
								<img :src="item.img_url" v-if="item.img_url" alt="" mode="aspectFill" class="thumb">
								<view class="content">{{item.name}}</view>
								<radio :value="item.id" :checked="item.checked==1" color="rgba(255,226,38,1)"/>
							</view>
						</view>
					</radio-group>
					<view class="vote-btn" @click="voteArticle">投一票</view>
				</view>
				<!-- 未投票end -->
				
				<!-- 已投票 -->
				<view class="vote-options" v-if="articleInfo.already_vote">
					<view v-for="(item,index) of voteData" :key="index" class="vote-wrapper">
						<view class="radio"  >
							<img :src="item.img_url" v-if="item.img_url" alt="" mode="aspectFill" class="thumb">
							<view class="content">{{item.name}}</view>
							<view class="process-label">
								{{item.voted_number}}票   ({{item.vote_percentage}})
							</view>
							<van-progress :percentage="item.vote_percentage_num" color="#128FFF" custom-class="process" :show-pivot="false"/>
						</view>
						
					</view>
						
					<view class="vote-member">
						<view class="vote-member-tit">
							<view>{{voteTotalNum}}人投票</view>
							<view>查看全部 <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/arrow-gray.png" alt=""></view>
						</view>
						<view class="vote-member-logo" v-for="(item,index) of voteMember" :key="index">
							<img :src="item" alt="" mode="aspectFill">
						</view>
					</view>	
				</view>
				<!-- 已投票end -->
			</view>
			<!-- 投票帖end -->
			
            <!--            按钮区域-->
            <view class="item-footer" :class="showFooter?'':'item-footer-hide'">
                <view class="content-label-a">
                    <view @click.stop="skipCircleHome(articleInfo.circle_id)"><img src="/static/img/biaoqian-img.png" /><text>{{articleInfo.circle_name}}</text></view>
                </view>
                <view class="list-item-footer">
                    <view class="list-item-left">
                        <view @click.stop="setInteractive(2,articleInfo.id)"><img src="/static/img/zhuanfa.png" />分享</view>
                        <view><img src="/static/img/huifu.png">{{articleInfo.comment_number}}</view>
                    </view>
                    <view class="list-item-right">
                        <view @click.stop="setInteractive(0,articleInfo.id)"><img src="/static/img/appreciate_up.png" v-if="articleInfo.already_good!=1"><img src="/static/img/appreciate_up-active.png" v-if="articleInfo.already_good==1">{{articleInfo.good_number}}</view>
                        <view @click.stop="setInteractive(1,articleInfo.id)"><img src="/static/img/appreciate_down.png" v-if="articleInfo.already_not_good!=1"><img src="/static/img/appreciate_down-active.png" v-if="articleInfo.already_not_good==1">{{articleInfo.not_good_number}}</view>
                    </view>
                </view>
            </view>

            <!--            end-->
        </view>

        <!--        评论区域-->
        <view class="item-comment">
            <view class="item-comment-change">
                <view :class="showComment==0?'comment-change-item on':'comment-change-item'" @click="switchCommentList(0)">全部回复<text></text></view>
                <view :class="showComment==1?'comment-change-item on':'comment-change-item'" @click="switchCommentList(1)">只看楼主<text></text></view>
<!--                <view class="right-float">-->
<!--                    <view class="right-sort-name">热门</view>-->
<!--                    <img style="width: 40rpx;height: 40rpx" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/sort-a.png">-->
<!--                </view>-->
            </view>
<!--            全部回复-->
            <view class="item-comment-content">
                <view class="comment-content-null" v-if="UserCommentList.length==0">
                    <img mode="widthFix" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/noCollect.png" />
                    <text>暂无评论内容</text>
                </view>
                <view class="comment-content-item" v-if="UserCommentList.length>0" v-for="(item,index) in UserCommentList" :key="index">
                    <view class="list-item-head-c">
                        <view class="item-head-portrait-a" @click.stop="addPersonCenter(item.user_id)">
                            <img :src="item.photo_url" />
                        </view>
                        <view class="item-head-name" @click.stop="addPersonCenter(item.user_id)">
                            <view class="name">
                                <p>{{item.user_name}}</p>
                                <img v-if="levelShow==1 && item.user_grade" :src="'http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/LV'+item.user_grade+'.png'"/>
                            </view>
                            <text>第{{item.floor}}楼·{{item.created_at.split(" ")[0]}}</text>
                        </view>
                        <view class="item-head-right">
                            <view @click.stop="setCommentInteractive(0,item.id,index)"><img src="/static/img/appreciate_up.png" v-if="item.is_give_good!=1"><img src="/static/img/appreciate_up-active.png" v-if="item.is_give_good==1">{{item.good_number}}</view>
                            <view @click.stop="setCommentInteractive(1,item.id,index)"><img src="/static/img/appreciate_down.png" v-if="item.is_give_not_good!=1"><img src="/static/img/appreciate_down-active.png" v-if="item.is_give_not_good==1">{{item.not_number}}</view>
                        </view>
                    </view>
                    <view class="content-item-bottom">
                        <view v-if="item.content.length > 0" @click="CommentorReply(item.user_id,'reply',item.id)">
                            <u-parse class="item-comment-content" :content="item.content" @preview="preview" @navigate.stop="navigate"/>
                        </view>
                        <view class="item-reply-number" @click="skipCommentReply(item.id,item.reply_number,item.user_id,item.floor)"><img src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/result-grey.png" />{{item.reply_number>0?item.reply_number+'条':''}}回复<img src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/right-grey.png" /></view>
                    </view>
                </view>
                <view class="comment-content-more" v-if="UserCommentList.length>0">
                    <text>暂无更多评论</text>
                </view>
            </view>
<!--            只看楼主-->
        </view>
        <!--        end-->

        <!--        底部浮动区域-->
        <view class="input-assembly" v-if="!inputShow" >
            <view class="input-assembly-nav">
                <view class="comment-btn" @click="CommentorReply()">我有一个大胆的想法</view>
                <view class="comment-address">
                    <img src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/huifu-d.png" />
                    <text>{{articleInfo.comment_number}}</text>
                </view>
                <view class="post-collection" @click.stop="setInteractive(3,articleInfo.id)">
                    <img style="width: 7vw;height: 7vw;" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/collect-d.png" v-if="articleInfo.already_cllect!=1"/>
					<img style="width: 7vw;height: 7vw;" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/collects-active.png" v-if="articleInfo.already_cllect==1"/>
                </view>
                <view class="post-forward" @click.stop="setInteractive(2,articleInfo.id)">
                    <img src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/zhuanfa-d.png" />
                </view>
            </view>
        </view>
        <indexPut v-if="inputShow" :IndexputInfo.sync="indexputInfo"></indexPut>
        <!--        end-->


        <!--更多回复弹窗-->
        <view class="more-Reply-popup" @click="hidePopup" :class="popupLayerClass" :style="{'padding-top':navigationbarHeight+'px'}">
            <view class="more-Reply-content" :style="{'height':'calc(100vh - '+navigationbarHeight+'px)'}" @click.stop>
                <view class="Reply-content-top">
                    {{ReplyIndex}}楼的回复
                    <img @click="hidePopup" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/delXX-black.png" />
                </view>
                <view class="Reply-content-bottom">
                    <view class="landlord-content">
                        <view class="list-item-head-c">
                            <view class="item-head-portrait-a">
                                <img :src="commentInfo.photo_url" />
                            </view>
                            <view class="item-head-name">
                                <view class="name">
                                    <p>{{commentInfo.user_name}}</p>
                                    <img v-if="levelShow==1 && commentInfo.user_grade  " :src="'http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/LV'+commentInfo.user_grade+'.png'"/>
                                </view>
                                <text>第{{ReplyIndex}}楼·{{commentInfo.created_at}}</text>
                            </view>
                            <view class="item-head-right">
                                <view @click.stop="setInteractive(0,commentInfo.id)"><img src="/static/img/appreciate_up.png" v-if="commentInfo.is_give_good!=1"><img src="/static/img/appreciate_up-active.png" v-if="commentInfo.is_give_good==1">{{commentInfo.good_number}}</view>
                                <view @click.stop="setInteractive(1,commentInfo.id)"><img src="/static/img/appreciate_down.png" v-if="commentInfo.is_give_not_good!=1"><img src="/static/img/appreciate_down-active.png" v-if="commentInfo.is_give_not_good==1">{{commentInfo.not_number}}</view>
                            </view>
                        </view>
                        <view class="content-item-bottom" @click="inputShow = true">
                            <view class="item-comment-content" v-html="commentInfo.content"></view>
                        </view>
                    </view>
                    <view class="landlord-reply-list">
                        <view class="reply-list-length">
                            共{{commentInfo.reply_number}}条回复
                        </view>
                        <view class="reply-list-item" style="padding-bottom: 20rpx;border-bottom: 1rpx solid #F3F5F6" v-for="(item,index) in commentInfo.reply" :key="index">
                            <view class="list-item-head-c" style="padding-top: 0">
                                <view class="item-head-portrait-a">
                                    <img :src="item.photo_url" />
                                </view>
                                <view class="item-head-name">
                                    <view class="name">
                                        <p style="color: #333333">{{item.user_name}}</p>
                                        <img v-if="levelShow==1 && item.user_grade" :src="'http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/LV'+item.user_grade+'.png'"/>
                                    </view>
                                    <text>{{item.created_at}}</text>
                                </view>
                                <!-- <view class="item-head-right" v-if="false">
                                    <view><img src="/static/img/appreciate_up.png">17</view>
                                    <view><img src="/static/img/appreciate_down.png">17</view>
                                </view> -->
                            </view>
                            <view class="content-item-bottom">
                                <view class="item-comment-content" style="margin-top: 0rpx;" v-html="item.content"></view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="reply-bottom-flex" v-if="popupLayerClass"  @click="addReply">
            <text>我有一个大胆的想法~</text>
        </view>
        <!--end-->
    </view>
</template>

<script>
    import uParse from '@/components/gaoyia-parse/parse.vue'
    import indexPut from "@/pages/components/inputbar/indexput.vue";
    import TopBar from "@/pages/components/topBar/topBar";
    export default {
        name: "postdetails",
        components: {indexPut,uParse,TopBar},
        data(){
            return{
                navigationbarHeight: getApp().globalData.navStyle.navigationbarHeight,
                showName: 'white',
                post_article_id: '',
                articleInfo: {},
                inputShow:false,
                inputShows:false,
                indexputInfo: {},
                UserCommentList: [],
                showComment: 0,
                userId: uni.getStorageSync("userId"),
                popupLayerClass:'',
                commentInfo:{},
                ReplyIndex:0,
                imgShow:'',
				levelShow:1,//'显示会员等级'
				showFooter:true,//显示帖子内容的标签
				specialRoute:{},
				
				//投票帖
				voteMember:[],//已投票的人员
				voteTotalNum:'',
				voteIndex:-1,
				voteId:'',
				voteData:[]//选项
				
            }
        },
		onPageScroll(e){
			if(e.scrollTop>this.navigationbarHeight&&this.articleInfo.video_url_array.length!=0){
				this.showFooter=false
			}else{
				this.showFooter=true
			}
		},
        onLoad(query){
            // uni.setStorageSync('post_article_id',query.post_article_id);
            this.post_article_id = query.post_article_id;
			if(query.levelShow){
				this.levelShow=query.levelShow
			}
			
			console.log(query,5555,this.levelShow)
			if(query.inviteId){
				//邀请人的用户id，新用户授权时带上
				this.$bus.$data.inviteId=query.inviteId
			}
            this.getArticleDetail();
            // this.getComment();
            this.getArticleCommentList();
        },
        onShow(){

        },
        methods:{
			async voteArticle(){
				//投票
				let params={
					user_token:uni.getStorageSync('userToken'),
					article_id:this.post_article_id,
					option_id:this.voteId
				}
				let res=await this.$api.voteArticle(params)
				if(res.data.level=='success'){
					this.voteData=res.data.data.map(item=>{
						item.vote_percentage_num=item.vote_percentage.split('%')[0]
						return item
					});
					this.articleInfo.already_vote=1
					this.getVoteUser()
				}
				uni.showToast({
					icon:'none',
					title:res.data.message
				})
			},
			async getVoteUser(){
				////获取（最近）投票的用户
				let res=await this.$api.getVoteUser({type:'recently',article_id:this.post_article_id})
				if(res.data.level=='success'){
					this.voteMember=res.data.data;
					this.voteTotalNum=res.data.page_info.total
				}
			},
			voteIndexChange(item,index){
				this.voteData.forEach((val,key,arr)=>{
						if(key==index){
							this.$set(this.voteData,key,Object.assign(val,{checked:1}))
							this.voteId=val.id
							this.voteIndex=key
						}else{
							this.$set(this.voteData,key,Object.assign(val,{checked:0}))
						}
				})
			},
            contentImgLoad(e){
                if (e.detail.width == e.detail.height){
                    this.imgShow = 'deng';
                } else if (e.detail.width > e.detail.height) {
                    this.imgShow = 'width-height';
                }else {
                    this.imgShow = 'height-width';
                }
            },
            preview(src, e) {
                // do something
            },
            navigate(href, e) {
                // do something
                uni.navigateTo({
                    url:href
                })
            },
            //点击添加回复
            addReply(){
                this.inputShows= false;
                this.inputShow = true;
                this.indexputInfo = {
                    post_article_id : this.commentInfo.post_article_id,
                    type: 'reply',
                    user_id: this.commentInfo.user_id,
                    comment_id: this.commentInfo.id
                }
            },
            //视频播放全屏
            onVideoShow(){
                let videoContext = uni.createVideoContext('video');
                // 进入全屏状态
                videoContext.requestFullScreen();
            },
            //更新数据
            onWXshow(){
                // this.getComment();
                this.getArticleCommentList();
                this.getCommentDetail(this.UserCommentList[this.ReplyIndex].id);
            },
            // 预览图片
            showPic(url){
                uni.previewImage({
                    indicator:"none",
                    current:url,
                    urls: this.articleInfo.img_url_array
                });
            },
            //切换评论列表
            switchCommentList(id){
                this.showComment = id;
                if (id == 0){
                    this.getArticleCommentList();
                } else {
                    this.getArticleCommentList(this.articleInfo.user_id);
                }
            },
            //点击评论或回复
            CommentorReply(usersId="", type="", commentId=""){
                this.inputShow = true;
                this.indexputInfo = {
                    post_article_id : this.post_article_id,
                    type: type,
                    user_id: usersId,
                    comment_id: commentId
                }
            },
            //获取帖子详情
            async getArticleDetail(){
                let params = {
                    article_id : this.post_article_id,
                    user_token: uni.getStorageSync('userToken')
                }
                const res = await this.$api.getArticleDetail(params);
                if (res.data.level == 'success'){
                    this.articleInfo = res.data.data;
					if(res.data.data.vote_option&&res.data.data.vote_option.length!=0){
						//投票帖子
						this.voteData=res.data.data.vote_option
						if(res.data.data.already_vote){
							//已经投过票
							this.voteData=res.data.data.vote_option.map(item=>{
								item.vote_percentage_num=item.vote_percentage.split('%')[0]
								return item
							});
							this.getVoteUser()
						}
					}
					this.specialRoute={
						path:'/pages/circlebar/circlebarhome/circlebarhome',
						options:{
							circle_id:this.articleInfo.circle_id
						}
					}
					console.log(this.specialRoute)
                } else {
                    uni.showToast({
                        icon:'none',
                        title:res.data.message
                    })
                }
            },
            //获取评论和回复
            async getComment(){
              let params = {
                  post_article_id: this.post_article_id
              }
              const res = await this.$api.getComment(params);
              if (res.data.level == 'success'){
                  console.log(res)
                  this.UserCommentList = res.data.data;
              } else {
                  uni.showToast({
                      icon:'none',
                      title:res.data.message
                  })
              }
            },
            //获取评论详情
            async getCommentDetail(id){
                let params = {
                    comment_id : id,
                    user_token : uni.getStorageSync('userToken')
                }
                const res = await this.$api.getCommentDetail(params)
                if (res.data.level == 'success'){
                    this.commentInfo = res.data.data;
                    // this.popupLayerClass = 'showLayers';
                } else {
                    uni.showToast({
                        icon:'none',
                        title:res.data.message
                    })
                }
            },
            //获取帖子评论列表
            async getArticleCommentList(id=''){
                let params = {
                    article_id: this.post_article_id,
                    user_token: uni.getStorageSync('userToken'),
                    page: 1,
                    limit: 10,
                    user_id: id
                }
                const res = await this.$api.getArticleCommentList(params);
                if (res.data.level == 'success'){
                    this.UserCommentList = res.data.data;
                } else {
                    uni.showToast({
                        icon:'none',
                        title:res.data.message
                    })
                }
            },
            //取消关注用户
            async unFollowUser(userId){
                //取关
                let params={
                    user_token:uni.getStorageSync('userToken'),
                    user_id:userId
                }
                let res=await this.$api.unFollowUser(params);
                if(res.data.level=='success'){
                    uni.showToast({
                        icon:'success',
                        title:res.data.message
                    })
                    this.articleInfo.i_follow_it=0
                }else {
                    uni.showToast({
                        icon:'none',
                        title:res.data.message
                    })
                }
            },
            //关注用户
            async followUser(userId){
                //关注
                let params={
                    user_token:uni.getStorageSync('userToken'),
                    user_id:userId
                }
                let res=await this.$api.followUser(params)
                if(res.data.level=='success'){
                    uni.showToast({
                        icon:'success',
                        title:res.data.message
                    })
                    console.log(res)
                    this.articleInfo.i_follow_it= 1
                }else {
                    uni.showToast({
                        icon:'none',
                        title:res.data.message
                    })
                }
            },
            //跳转评论回复详情页
            skipCommentReply(commentId,replyNumber,userId,index){
                if (replyNumber>0){
                    this.getCommentDetail(commentId);
                    this.ReplyIndex = index;
                    this.inputShows = true;
                    this.popupLayerClass = 'showLayers';
                } else {
                    this.CommentorReply(userId,'reply',commentId);
                }
                // uni.navigateTo({
                //     url: '/pages/commentReply/commentReply?CommentId='+id
                // })
            },
            //跳转到圈子首页
            skipCircleHome(id){
                uni.navigateTo({
                    url: '/pages/circlebar/circlebarhome/circlebarhome?circle_id='+id
                })
            },
            //跳转到个人主页
            addPersonCenter(userID,noName=0){
            	if(parseInt(userID)==uni.getStorageSync('userId')){
            		//本人发的帖子
            		uni.navigateTo({
            		    url: "/pages/person/customHomepage/customHomepage?userId="+userID
            		})
            		return
            	}
            	if(parseInt(noName)==1){
            		//匿名
            		return
            	}
                uni.navigateTo({
                    url: "/pages/person/customHomepage/customHomepage?userId="+userID
                })
            },
			//新增帖子互动记录
			async setInteractive(type,articleID){
			    let params = {
			        user_token: uni.getStorageSync('userToken'),
			        post_article_id : articleID,
			        action_type: type
			    }
			    const res = await this.$api.setInteractive(params);
			    if (res.data.level == 'success'){
			        if(type!=2){
			        	uni.showToast({
			        	    icon:'none',
			        	    title:res.data.message
			        	})
			        }
			        switch (type) {
			            case 0:
			                this.articleInfo.good_number++;
			                this.articleInfo.already_good = 1;
                            if (this.articleInfo.already_not_good == 1){
                                this.articleInfo.already_not_good=0;
                                this.articleInfo.not_good_number--;
                            }
			                break;
			            case 1:
			                this.articleInfo.not_good_number++;
                            this.articleInfo.already_not_good = 1;
                            if (this.articleInfo.already_good == 1){
                                this.articleInfo.already_good=0;
                                this.articleInfo.good_number--;
                            }
			                break;
			            case 2:
			                this.articleInfo.share_number++;
							uni.navigateTo({
								url:`/pages/sharePost/sharePost?post_article_id=${this.post_article_id}`
							})
			                break;
						case 3:
							this.articleInfo.already_cllect=1;
							break;
			        }
			    } else {
			        
			        switch (type) {
			            case 0:
			                this.articleInfo.good_number--;
                            this.articleInfo.already_good = 0;
			                break;
			            case 1:
			                this.articleInfo.not_good_number--;
                            this.articleInfo.already_not_good = 0;
			                break;
			            case 2:
			                this.articleInfo.share_number--;
							uni.navigateTo({
								url:`/pages/sharePost/sharePost?post_article_id=${this.post_article_id}`
							})
			                break;
						case 3:
							this.articleInfo.already_cllect=0;
							break;
			        }
			    }
			},
            //评论互动
            async setCommentInteractive(type,commentId,index){
                let params = {
                    post_article_id: this.post_article_id,
                    comment_id: commentId,
                    action_type:type,
                    user_token: uni.getStorageSync('userToken')
                }
                const res = await this.$api.setCommentInteractive(params);
                if (res.data.level == 'success') {
                    switch (type) {
                        case 0:
                            this.UserCommentList[index].good_number++;
                            this.UserCommentList[index].is_give_good = 1;
                            if (this.UserCommentList[index].is_give_not_good == 1){
                                this.UserCommentList[index].is_give_not_good=0;
                                this.UserCommentList[index].not_number--;
                            }
                            let str = this.UserCommentList;
                            this.UserCommentList = [];
                            this.UserCommentList = str;
                            break;
                        case 1:
                            this.UserCommentList[index].not_number++;
                            this.UserCommentList[index].is_give_not_good = 1;
                            if (this.UserCommentList[index].is_give_good == 1){
                                this.UserCommentList[index].is_give_good=0;
                                this.UserCommentList[index].good_number--;
                            }
                            let sts = this.UserCommentList;
                            this.UserCommentList = [];
                            this.UserCommentList = sts;
                            break;
                    }
                }else {
                    switch (type) {
                        case 0:
                            this.UserCommentList[index].good_number--;
                            this.UserCommentList[index].is_give_good = 0;
                            let str = this.UserCommentList;
                            this.UserCommentList = [];
                            this.UserCommentList = str;
                            break;
                        case 1:
                            this.UserCommentList[index].not_number--;
                            this.UserCommentList[index].is_give_not_good = 0;
                            let sts = this.UserCommentList;
                            this.UserCommentList = [];
                            this.UserCommentList = sts;
                            break;
                    }
                }
            },
            //关闭弹窗
            hidePopup(){
                this.popupLayerClass = '';
                this.inputShows = false
            }
        }
    }
</script>

<style scoped lang="scss">
    .page{
        width: 100vw;
        padding-bottom: 120rpx;
    }
	.vote-options{
		//投票样式
		$padding:10rpx;
		radio-group{
			width: 100%;
		}
		.vote-wrapper{
			margin:15rpx 0;
			width: 100%;
		}
		.radio{
			
			padding:$padding;
			min-height: 100rpx;
			border-radius:8px;
			
			border:4rpx solid rgba(217,217,217,1);
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
		}
		.radio-activity{
			border:4rpx solid rgba(255,226,38,1);
		}
		.thumb{
			width: 100rpx;
			height: 100rpx;
			border-radius: 8rpx;
			margin-right: $padding;
		}
		.content{
			flex:1;
			margin-bottom: $padding;
			font-size:32rpx;
		}
		.vote-btn{
			background-color: #FFE226;
			width:280rpx;
			height:88rpx;
			line-height: 88rpx;
			background:rgba(255,226,38,1);
			border-radius:6px;
			text-align: center;
			font-weight: 600;
			margin: 20rpx auto ;
		}
		
		//已投票
		.process-label{
			margin-top:$padding;
			color:#5BA6FE;
			width: 100%;
		}
		.vote-member{
			margin-top:30rpx;
			.vote-member-tit{
				display: flex;
				justify-content: space-between;
				color:#8B8D93;
				font-size: 24rpx;
				img{
					width: 20rpx;
					height: 20rpx;
				}
			}
			.vote-member-logo{
				margin:10rpx 0;
				img{
					width: 60rpx;
					height: 60rpx;
					margin-right: 10px;
					border-radius: 4rpx;
				}
			}
		}
	}
    .item-details{
        background: #ffffff;
        border-bottom: 20rpx solid #F3F5F6;
		
		
        /*padding: 30rpx;*/
    }
	.item-details-fixed{
		position: sticky;
		width: 100%;
		z-index:999;
	}
	.item-footer{
		height: 150rpx;
		overflow: hidden;
		transition: all .3s ease-in-out;
	}
	.item-footer-hide{
		height: 0;
	}
	.item-content-a{
		
		// position: sticky;
	}
    .item-details-video{
		
        
        margin: 20rpx 0;
        video{
			height: calc(80vw*(9/16));
			width: 100%;
            /*height: auto;*/
            border-radius: 10rpx;
        }
        view{
            font-size: 36rpx;
            font-weight: bold;
            padding: 10rpx 50rpx;
            line-height: 50rpx;
        }
    }
    .item-comment{
        /*margin-top: 10rpx;*/
        background: #ffffff;
        .item-comment-change{
            overflow: visible;
            padding: 10rpx;
            display: flex;
            flex-direction: row;
            position: relative;
            justify-content: left;
            border-bottom: 1rpx solid #E6E6E6;
            .right-float{
                display: flex;
                flex-direction: row;
                justify-content: flex-end;
                position: absolute;
                right: 20rpx;
                top: 30rpx;
                .right-sort-name{
                    font-size: 28rpx;
                    line-height: 40rpx;
                    color: #292929;
                }
            }
            .comment-change-item{
                font-size: 28rpx;
                padding: 20rpx;
                text-align: center;
                overflow: visible;
                position: relative;
                color: #BBBCBF;
            }
            text{
                position: absolute;
                width: 40%;
                height: 6rpx;
                background: #000000;
                bottom: -6rpx;
                left: 30%;
                opacity: 0;
            }
            .on{
                color: #000;
                font-weight: bolder;
            }
            .on text{
                position: absolute;
                width: 70%;
                height: 16rpx;
                background: rgba(254,210,44,0.4);
                bottom: 15rpx;
                left: 15%;
                opacity: 1;
            }
        }
        .item-comment-content{
            margin-top: 20rpx;
        }
        .comment-content-null,.comment-content-more{
            padding: 40rpx;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text{
                color: #6F7073;
                font-size: 28rpx;
            }
            img{
                width: 50vw;
            }
        }
    }
    .more-Reply-popup{
        &.showLayers{
            transform: translate3d(0,-100vh,0);
            background: rgba(0,0,0,0.5);
        }
        width: 100vw;
        position: fixed;
        height: 100vh;
        top: 100vh;
        left: 0;
        z-index: 9999;
        .more-Reply-content{
            width: 100vw;
            background: #F1F4F7;
            border-radius: 20rpx 20rpx 0 0;
            overflow: hidden;
            .Reply-content-top{
                width: 100%;
                text-align: center;
                position: relative;
                line-height: 92rpx;
                height: 92rpx;
                font-weight: bolder;
                font-size: 32rpx;
                img{
                    position: absolute;
                    width: 44rpx;
                    height: 44rpx;
                    left: 30rpx;
                    top: 24rpx;
                }
            }
            .Reply-content-bottom{
                background: #FFFFFF;
                width: 100%;
                height: calc(100% - 92rpx);
                .landlord-content{
                    border-bottom: 24rpx solid #F1F4F7;
                    padding: 20rpx 0;
                }
            }
            .reply-list-length{
                padding: 20rpx;
                font-size: 28rpx;
            }
        }
    }
    .reply-bottom-flex{
        width: calc(100vw - 60rpx);
        height: 72rpx;
        position: fixed;
        bottom: 0;
        left: 0;
        padding: 14rpx 30rpx;
        background: #FFFFFF;
        z-index: 9999;
        box-shadow: 0rpx -2rpx 16rpx 0rpx rgba(0,0,0,0.06);
        text{
            height: 32rpx;
            border-radius: 12rpx;
            background: #F7F7F7;
            color: #BBBCBF;
            font-size: 28rpx;
            line-height: 32rpx;
            padding: 20rpx;
        }
    }
</style>
<style>
	.process{
		margin-top:20rpx;
		width: calc(100vw - 100rpx);
	}
	radio .wx-radio-input.wx-radio-input-checked::before{ 
	   color:#000;

	}
	

</style>